<template>
    <div class="content">
        <div class="top">
            <div class="top-form">
                <el-input v-model="form.communityname" placeholder="请输入发布小区" style="margin-left: 0"></el-input>
                <el-input v-model="form.title" placeholder="请输入公告主题" clearable></el-input>
                <el-input v-model="form.content" placeholder="请输入发布内容" clearable style="width: 30%"></el-input>
                <el-button type="success" @click="add" class="postButton" icon="el-icon-plus"
                    v-if="this.type == 1">发布公告</el-button>
                <el-button type="primary" @click="reset" class="postButton">重置</el-button>
            </div>
        </div>

        <div class="contain">
            <div class="tab">
                <el-tabs type="border-card" v-model="activeName">
                    <el-tab-pane label="公告信息" name="post" style='background-color:white'>
                        <div class="down-form">
                            <div class="table">
                                <el-table ref="logTable" :data="tableData" v-loading="loading" border
                                    :header-cell-style="{ 'background': '#eef1f6', 'color': '#1f2d3d', 'border-color': '#dfe6ec' }"
                                    style="width: 100%;font-size: 14px;color: #1f2d3d">
                                    <el-table-column type="index" label="序号" align="center" width="70">
                                    </el-table-column>
                                    <el-table-column prop="title" label="公告主题" min-width="15%" show-overflow-tooltip
                                        align="center">
                                    </el-table-column>
                                    <el-table-column prop="content" label="公告内容" min-width="30%" show-overflow-tooltip
                                        align="center">
                                    </el-table-column>
                                    <el-table-column prop="createtime" label="发布时间" sortable min-width="15%"
                                        show-overflow-tooltip :formatter="dateFormat" align="center">
                                    </el-table-column>
                                    <el-table-column prop="communityname" label="小区名称" min-width="9%" align="center">
                                    </el-table-column>
                                    <!--                                    管理员-->
                                    <el-table-column v-if="this.type == 1" prop="" label="操作" min-width="11%"
                                        align="center">
                                        <template slot-scope="scope">
                                            <div style="display: flex;margin-left: 3px">
                                                <el-button :plain="true" size="mini" type="danger"
                                                    style="font-size: 12px;color: #fff;background-color: #ff4949;border-color: #ff4949"
                                                    @click="del(scope.row, scope.$index)"><i
                                                        class="el-icon-delete"></i>归档</el-button>
                                                <el-button :plain="true" size="mini" type="primary"
                                                    style="color: #fff;font-size: 12px;background-color: #20a0ff;border-color: #20a0ff"
                                                    @click="detail(scope.row)"><i
                                                        class="el-icon-zoom-in"></i>查看公告</el-button>
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <!--                                    普通用户-->
                                    <el-table-column v-else label="操作" min-width="11%" align="center">
                                        <template slot-scope="scope">
                                            <div>
                                                <el-button :plain="true" size="mini" type="primary"
                                                    style="color: #fff;font-size: 12px;background-color: #20a0ff;border-color: #20a0ff"
                                                    @click="detail(scope.row)"><i
                                                        class="el-icon-zoom-in"></i>查看公告</el-button>
                                            </div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                            <div class="block">
                                <el-pagination @current-change="handleCurrentChange"
                                    layout="total, sizes,prev, pager, next, jumper" :current-page.sync="iPagination.current"
                                    :page-size='iPagination.pageSize' :page-sizes="iPagination.pageSizeOptions"
                                    :total="iPagination.total" background @size-change="handleSizeChange">
                                </el-pagination>
                            </div>
                            <poster-dialog ref="posterDialog"></poster-dialog>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>


    </div>
</template>

<script>
import moment from 'moment'
import posterDialog from './posterDialog'
export default {
    name: "post",
    components: {
        posterDialog,
    },
    data() {
        return {
            type: '',
            activeName: 'post',
            form: {
                communityname: '',
                title: '',
                content: '',
            },
            tableData: [],
            iPagination: {
                current: 1,
                pageSize: 10,
                pageSizeOptions: [5, 10, 20, 50, 100],
                total: 0,
                "page": 0,
                "pageSize": 10,
            },
            loading: false,
            dialogFormVisible: false,
        }
    },
    created() {
        let token = sessionStorage.token;
        this.$axiosToken({
            url: '/users/getUserByToken',
            method: 'get',
            data: {},
            success: (result => {
                this.type = result.type
            })
        });
    },
    mounted() {
        this.getPoster()
    },
    methods: {
        // 分页导航
        handleCurrentChange(val) {
            this.iPagination.current = val;
            this.getPoster()
        },
        handleSizeChange(val) {
            this.iPagination.current = 1;
            this.iPagination.pageSize = val;
            this.getPoster()
        },
        // 公告列表
        getPoster() {
            this.loading = true;
            this.$Axios({
                url: '/poster/getPosterData',
                method: 'get', 
                data: {
                    currPage: this.iPagination.current - 1,
                    pageNum: this.iPagination.pageSize,
                },
                success: (result) => {
                    this.tableData = result.data;
                    this.iPagination.total = result.total;
                    setTimeout(() => {
                        this.loading = false;
                    }, 200);
                }
            })
        },
        // 发布公告
        add() {
            if (this.form.communityname == '' || this.form.title == '' || this.form.content == '') {
                this.$alert('请确保发布的公告内容是否填写完整', '公告内容不全', {
                    confirmButtonText: '确定',
                })
            } else {
                this.$axiosToken({
                    url: '/poster/addPoster',
                    method: 'post',
                    data: {
                        communityname: this.form.communityname,
                        title: this.form.title,
                        content: this.form.content
                    },
                    success: (result) => {
                        this.$message({
                            message: '发布公告成功',
                            type: 'success',
                            duration: 2000
                        })
                        this.getPoster()
                        this.reset()
                    }
                })
            }
        },
        // 清空输入框
        reset() {
            this.form = {
                communityname: '',
                title: '',
                content: '',
            }
            this.getPoster()
        },
        // 删除公告
        del(row, index) {
            console.log(row, 11)
            this.$confirm('确定永久归档这条公告？', '提示', {
                type: 'warning',
            }).then(() => {
                this.$axiosToken({
                    url: '/poster/delPoster',
                    method: 'get',
                    data: { p_id: row.p_id },
                    success: (result) => {
                        this.$message({
                            message: '删除该公告信息成功',
                            type: 'success',
                            duration: 2000
                        });
                        this.getPoster()
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消归档该公告',
                    duration: 2000
                })
            })
        },
        detail(row) {
            this.$refs.posterDialog.dialogFormVisible = true;
            this.$refs.posterDialog.formData = Object.assign(row)
        },
        // 时间格式转化
        dateFormat(row, column) {
            var date = row[column.property];
            if (date == undefined) {
                return ''
            } else {
                return moment(date).format("YYYY-MM-DD HH:mm:ss")

            }
        },

    },
}
</script>

<style scoped>
::v-deep .el-input__inner {
    font-size: 14px;
    height: 36px;
}

.el-input {
    width: 21%;
    margin-left: 10px;
}

::v-deep .el-input__icon.el-range__icon.el-icon-date {
    line-height: 27px;
}

.el-select {
    width: 21%
}

.postButton {
    margin-left: 15px;
    width: 8%;
    font-size: 14px;
    color: #fff;
}

.tab {
    margin-top: 15px;
}

.block {
    float: right;
    margin-top: 10px;
}

::v-deep .el-input.el-input--mini.el-input--suffix>.el-input__inner {
    height: 28px;
}

::v-depp .el-button--mini,
.el-button--small {
    border-radius: 5px;
}
</style>